<!-- 定位
    static          静态        默认
    relative        相对        参照于静态位置进行偏移(偏移后原位置仍视为被占用)
    absolute        绝对        参照于找外层第1个非静态定位进行偏移（没有则参照于body）
                                                            （自身不占用空间）
    fixed           固定        固定在给定坐标处（参照于网页窗口）
    sticky          粘性        未到达指定坐标处，相当于默认定位（参照于网页窗口）
                                到达指定坐标处，相当于固定定位（参照于网页窗口）
-->




<!-- 定位属性
    position:
                    static      静态
                    relative    相对
                    absolute    绝对
                    fixed       固定
                    sticky      粘性
-->




<!-- 偏移
    left:100px      左偏移（图向右）
    right:100px     右偏移（图向左）
    top:100px       上偏移（图向下）
    bottom:100px    下偏移（图向上）
-->


<!-- 坐标
    left:10
    right:10
    top:10
    bottom:10
-->





<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        .div1 {
            background-color: rebeccapurple;
            text-align: center;
            line-height: 100px;
            width: 100px;
            height: 100px;
        }

        .relative {
            position: relative;
            background-color: aqua;
            left: 50px;
            top: 50px;
        }

        .div4 {
            position: absolute;
            background-color: violet;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            left: 50px;
            top: 50px;

        }

        .div5 {
            background-color: lightblue;
            width: 100px;
            height: 100px;
            text-align: left;
            line-height: 100px;
            position: fixed;
            right: 0;
            top: 0;
        }
        .div6{
            background-color: yellow;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            position: sticky;
            top: 200px;
            bottom: 0;
        }
    </style>
</head>




<body>

    <div class="static">
        <p>静态定位</p>
        <h5>静态定位</h5>
        <span>静态定位</span>
    </div>
    <br>
    <hr>
    <br>
    <div class="div1">相对定位</div>
    <br>
    <div class="div1 relative">相对定位</div>
    <br>
    <div class="div1">相对定位</div>
    <br>
    <hr>
    <br>
    <div class="div5">固定
        <div class="div4">绝对</div>
    </div>
    <br>
    <hr>
    <br>
    <div class="div6">粘性</div>

    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>

</body>

</html>